<template>
  <div>
    <el-dialog
      title="打印条码"
      v-model="previewDialogVisible"
      width="50%"
      @close="resetState"
    >
      <div id="print-content">
        <div class="print-preview" v-for="(qrCode, index) in currentQRCodeList" :key="index">
          <div class="label">
            <div class="label-content" style="display: flex; justify-content: center;   ">
              <div class="label-info">
                <p class="label-status">P N: {{ currentMaterialsItem.itemCode }}</p>
                <p class="label-id">S N: {{ currentMaterialsItem.serialNo }}</p>
                <!-- <p class="label-id">S N: {{ currentBatchGlueList[index] }}</p>-->
              </div>
              <img :src="qrCode" alt="QR Code" class="qr-code" style="width:50px;height:50px;margin-left:20px;margin-top:20px" />
            </div>
          </div>
        </div>
      </div>
      <div class="print-controls">
        <!--        <p>将打印 {{ printForm.quantity }} 次</p>-->
        <br />
        <el-button type="primary" @click="printContent">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import QRCode from 'qrcode'
import Print from 'vue-print-nb'

const props = defineProps({
  visible: Boolean,
  currentMaterialsItem: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

const previewDialogVisible = ref(false)
const currentQRCodeList = ref([])

const emit = defineEmits(['update:visible', 'reset'])
const printForm = ref({ quantity: 1 })
const currentBatchGlueList = ref<string[]>([])
const qrCodes = ref<Record<number, string>>({})
const printCount = ref(0)

watch(
  () => props.visible,
  (val) => {
    if (props.visible) {
      console.log(props.visible)
      previewDialogVisible.value = true
    }
    if (val) {
      previewPrint()
    } else {
      resetState()
    }
  }
)

const labelStyle = computed(() => ({
  width: `${printForm.value.width}mm`,
  height: `${printForm.value.height}mm`
}))

const printStyle = computed(
  () => `
  @page {
    size: ${printForm.value.width}mm ${printForm.value.height}mm;
    margin: ${printForm.value.margin}mm;
  }
`
)

function resetState() {
  currentQRCodeList.value = []
  currentBatchGlueList.value = []
  qrCodes.value = {}
  printCount.value = 0
  emit('reset')
}

async function previewPrint() {
  currentQRCodeList.value = []
  currentBatchGlueList.value = []

  if (!props.currentMaterialsItem) {
    return
  }

  const message = await QRCode.toDataURL(props.currentMaterialsItem.serialNo, {
    width: 100,
    height: 100,
    margin: 0
  })

  currentQRCodeList.value.push(message)
  console.log(123, currentQRCodeList.value)
  previewDialogVisible.value = true
}

function applyPrintStyles() {
  const style = document.createElement('style')
  style.id = 'print-styles'
  style.innerHTML = printStyle.value
  document.head.appendChild(style)
}

function removePrintStyles() {
  const style = document.getElementById('print-styles')
  if (style) {
    document.head.removeChild(style)
  }
}

const printContent = () => {
  // 创建一个隐藏的 iframe 用于打印
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  document.body.appendChild(iframe)

  // 将需要打印的内容复制到 iframe 中
  const printContent = document.getElementById('print-content').innerHTML
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
  iframeDoc.open()
  iframeDoc.write(` <html>
          <head>
            <style>
              .center-content {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
              }
              .content {
                display: flex;
                align-items: center;
              }
              .info {
                margin-right: 20px;
              }
              .info p {
                margin: 5px 0;
              }
              .qrcode img {
                width: 100px;
                height: 100px;
              }
            </style>
          </head>
          <body>
            <div class="center-content">
              <div class="content">
               ${printContent}
              </div>
            </div>
          </body>
        </html>`)
  iframeDoc.close()

  // 调用 iframe 的打印功能
  iframe.contentWindow.focus()
  iframe.contentWindow.print()

  // 打印完成后移除 iframe
  document.body.removeChild(iframe)
}
</script>

<style scoped>
.print-preview {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  width: 30px;
}

.qr-code {
  width: 11mm;
  height: 11mm;
  margin-left: 4mm;
  margin-top: 4mm;
}

.label-info {
  margin-left: 6mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.label-content {
  display: flex;
  
  width: 150mm;
  margin-left: 60mm;
}

.label-id {
  font-size: 10px;
  font-weight: bold;
  margin-bottom: -20px;
}

.label-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: -11px;
}

.label-status {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}

.print-controls {
  text-align: center;
}

 
</style>
